<!--
 * @Author: lee
 * @Date: 2024-01-31 15:19:23
 * @LastEditors: lee
 * @LastEditTime: 2024-01-31 18:59:04
 * @Description: file content
-->
<script setup>
import { ref } from "vue";
import MyChart from "@/components/myChart";
import * as echarts from "echarts";
import { getRandomArrayElements } from "@/utils/tools.js";
const options = ref({
  grid: {
    top: 30,
    left: 30,
    right: 30,
    bottom: 10,
    containLabel: true
  },
  xAxis: {
    show: false,
    type: "value"
  },
  yAxis: [
    //值
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff"
        }
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      data: [],
      max: 6 //最多显示7个
    },
    //背景
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: "12"
        }
      },
      data: []
    }
  ],
  series: [
    // 值
    {
      type: "bar",
      barGap: "-100%",
      barWidth: 10,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: "rgba(102, 72, 255, 1)"
          },
          {
            offset: 1,
            color: "rgba(22, 206, 185, 1)"
          }
        ])
      },
      max: 1,
      labelLine: {
        show: true
      },
      z: 2,
      data: []
    },
    // 背景
    {
      realtimeSort: true,
      type: "bar",
      barGap: "-65%",
      //   label: {
      //     normal: {
      //       distance: 20,
      //       show: true,
      //       position: "right",
      //       color: "#1e375b",
      //       fontSize: 14,
      //       formatter: function(param) {
      //         // datas.value[param.dataIndex]
      //         return 11;
      //       }
      //     }
      //   },
      showBackground: true,
      backgroundStyle: {
        color: "#1e375b"
      },
      barWidth: 10,
      itemStyle: {
        normal: {
          color: "#1e375b"
        }
      },
      z: 1,
      data: [130, 130, 130, 130, 130, 130, 130]
    }
  ]
});

let result = [
  { name: "重型一分厂", value: 20 },
  { name: "叶片分厂", value: 20 },
  { name: "金工分厂", value: 30 },
  { name: "焊接分厂", value: 52 },
  { name: "工业透平", value: 30 },
  { name: "重型二分厂", value: 28 },
  { name: "隔板分厂", value: 24 },
  { name: "重型一分厂1", value: 40 },
  { name: "叶片分厂1", value: 50 },
  { name: "金工分厂1", value: 60 },
  { name: "焊接分厂1", value: 72 },
  { name: "工业透平1", value: 40 },
  { name: "重型二分厂1", value: 38 },
  { name: "隔板分厂1", value: 34 }
];

const radomData = () => {
  options.value.yAxis[0].data = getRandomArrayElements(result, 7).map(item=>item.name);
  options.value.yAxis[1].data = getRandomArrayElements(result, 7).map(item=>item.value);
  options.value.series[0].data = getRandomArrayElements(result, 7).map(item=>item.value);
};

radomData();

setInterval(() => {
  radomData();
}, 3000);
</script>
<template>
  <div class="leftBox1 baseBorderBg">
    <div class="baseBoxHeader">六源改善数量</div>
    <div class="baseBoxBody">
      <myChart :option="options"></myChart>
    </div>
  </div>
</template>